<div *ngIf="showToc">
  <mat-drawer-container class="markdown-toc">
    <mat-drawer mode="side" opened class="left-drawer">
      <ul class="toc" #toc [class.sticky]="sticky"></ul>
    </mat-drawer>
    <mat-drawer-content class="right-content" #drawerContent (scroll)="handleScroll()">
      <markdown class="markdown" [src]="src" *ngIf="src"
                (load)="endLoading()"></markdown>

      <markdown class="markdown" [data]="data" *ngIf="data"></markdown>
      <mat-spinner *ngIf="loading" class="loading" color="accent"></mat-spinner>

      <div *ngFor="let tool of toolsets">
        <div class="toolset-render"><toolset [option]="tool"></toolset></div>
      </div>

    </mat-drawer-content>
  </mat-drawer-container>
</div>

<div *ngIf="!showToc" class="no-toc-markdown">
  <markdown
    (scroll)="handleScroll()"
    class="markdown"
    [src]="src"
    (load)="endLoading()"
  ></markdown>
  <mat-spinner *ngIf="loading" class="loading" color="accent"></mat-spinner>

  <div *ngFor="let tool of toolsets">
    <div class="toolset-render"><toolset [option]="tool"></toolset></div>
  </div>

</div>

<!--Scroll to top-->
<div class="scroll-to-top" [ngClass]="{'show-scrollTop': windowScrolled}" *ngIf="showScroll">
  <button mat-fab aria-label="home" (click)="scrollToTop()">
    <mat-icon>arrow_upward</mat-icon>
  </button>
</div>
